<template>
  <view class="main" v-if="orderData">
    <view class="address">
      <view class="address-content">
        <view class="iconfont icon-address"></view>
          <view class="address-info">
            <view class="address-text">{{ orderData.expressAddress }}</view>
            <view class="address-user">
              <text style="margin-right: 20rpx">{{ orderData.expressReceiverName }}</text>
              <text>{{ orderData.expressReceiverPhone }}</text>
            </view>
          </view>
      </view>
      <view class="order-status" 
          :class="{'status-doing': orderData.orderStatus === 1, 'status-done': orderData.orderStatus === 2}"
        >{{ orderStatus[orderData.orderStatus]}}</view>
    </view>
    <view class="products">

      <view class="cart-item" v-for="(item, index) in orderData.items" :key="index">
        <ProductOrder class="product-item" :product="item" >
        </ProductOrder>
      </view>
      <view class="products-footer">
        <view class="footer-total">
          <text>共计{{totalNum}}件</text>
        </view>
        <view class="footer-info">
          <view class="footer-price">
            <Price :price="orderData.totalAmount"  :type="orderData.orderType"/>
          </view>
          <view class="info-hint">合计总金额</view>
        </view>
      </view>
    </view>
    <view class="activity">
      <view class="activity-item" v-if="orderData.orderType === 1">
        <view class="item-label"><text>活动类型</text><text class="iconfont icon-info"></text></view>
        <view  class="reward-type" :class="{'point-text': orderData.rewardType === 1}">{{ orderData.rewardType === 1 ? '积分活动' : '返现活动'}}</view>
      </view>
      
      <view class="activity-item" v-if="orderData.orderType === 1">
        <view class="item-label">{{ orderData.rewardType === 1 ? '奖励积分' : '奖励金额'}}</view>
        <view>
          <Price :type="orderData.rewardType === 1  ? 2 : 1" :showCurrency="orderData.rewardType !== 1" :price="orderData.rewardAmount" color="#333333" bigFontSize="36rpx" />
          <text style="font-size:24rpx;" v-if="orderData.rewardType === 1">个积分</text>
        </view>
      </view>
      
      <view class="activity-item">
        <view class="item-label">订单编号</view>
        <view class="item-val">
          <text>{{orderData.id}}</text>
          <view class="btn-copy" @click="handleCopyOrderId">复制</view>
        </view>
      </view>
      
      <view class="activity-item">
        <view class="item-label">创建时间</view>
        <view class="item-val">{{orderData.createTime}}</view>
      </view>
      
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { getOrderDetailApi } from '@/api/user'
import ProductOrder from "../../components/product/ProductOrder.vue";
import { ORDER_STATUS, POINT_ORDER_STATUS } from '@/constants'

// const orderStatus = reactive(ORDER_STATUS)
const orderStatus = computed(()=> {
  if(orderData.value?.orderType === 1) {
    return ORDER_STATUS
  }
  return POINT_ORDER_STATUS
})
const orderId = ref(null)
const cartProductList = ref([])

const orderData = ref()

const totalNum = computed(()=> {
  return orderData.value.items?.reduce((sum, item) => sum + item.productAmount, 0)
})

const priceData = computed(()=> {
  const totalPrice = orderData.value?.totalAmount || 0
  if(totalPrice) {
    const price = totalPrice.toFixed(2)
    const [ integerPrice, decimalPrice] = price.split('.')
    // return price.split('.')[0]
    return {
      integerPrice,
      decimalPrice: '.' + decimalPrice
    }
  }
  return  {
    integerPrice: 0,
    decimalPrice: 0,
  }
})
onLoad((options)=> {
  if(options.orderId){
   orderId.value = options.orderId
  } else {
    uni.$u.toast('访问错误！')
    setTimeout(()=> {
      uni.switchTab({
        url: '/pages/index/index',
      })
    }, 2000)
  }
  
  init()
})

onPullDownRefresh( async ()=> {
  await init().finally(() => {
    uni.stopPullDownRefresh();
  });
})
async function init() {
 await getOrderData()
}
async function getOrderData(){
  const res = await getOrderDetailApi({'orderId': orderId.value})
  orderData.value = res
  console.log('res', res)
  
}


function handleCopyOrderId(){
  uni.setClipboardData({
    data: orderData.value.id  +'',
    success: function () {
      uni.$u.toast('已复制')
    },
    fail: function (e) {
      console.error(e)
    }
  });
}
</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background: #F4F6F8;
  padding-bottom: var(--safe-area-inset-bottom);
  .address{
    padding: 32rpx;
    background: #fff;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    .order-status{
      position: absolute;
      right: -31px;
      top: 28rpx;
      font-size: 28rpx;
      color: #fff;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ccc;
      z-index: 1;
      width: 210rpx;
      letter-spacing: 2rpx;
      transform: rotate(45deg);
      &.status-doing{
        background: #FF8F1F;
      }
      &.status-done{
        background: #00B578;
      }
    }
    .address-content{
      display: flex;
      .iconfont{
        color: #F27326;
        font-size: 28rpx;
      }
      .address-info{
        padding: 0 21rpx;
        .address-text{
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 36rpx;
          margin-bottom: 8rpx;
        }
        .address-user{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 36rpx;
        }
      }
    }
    .address-null{
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 36rpx;
    }
    .null-hint{
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .products{
    padding: 32rpx;
    margin-bottom: 20rpx;
    background: #fff;
  }
  .cart-item {
    height: 140rpx;
    display: flex;
    margin-bottom: 24rpx;
    &:last-child{
      margin-bottom: 0;
    }
    .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 104rpx;
      .item-checkbox{

      }
    }
    .product-item{
      flex: 1;
    }
  
  }
  .products-footer{
    display: flex;
    justify-content: space-between;
    padding-top: 20rpx;
    .footer-total{
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      line-height: 48rpx;
    }
    .footer-info{
      .footer-price{
        margin-bottom: 16rpx;
      }
      .info-hint{
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 36rpx;
        text-align: right;
      }
    }
  }
  .activity{
    padding: 32rpx;
    background: #fff;
    .activity-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      &:last-child{
        margin-bottom: 0;
      }
      .item-label{
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        line-height: 36rpx;
        .iconfont{
          margin-left: 8rpx;
          line-height: 36rpx;
        }
      }
      .reward-type{
        color: #3662EC;
        &.point-text{
          color: #FF8F1F;
        }
      }
      .item-val{
        display: flex;
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        line-height: 36rpx;
      }
      .btn-copy{
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        line-height: 36rpx;
        padding-left: 16rpx;
        margin-left: 16rpx;
        position: relative;
        &:before{
          position: absolute;
          content: '';
          left: 0;
          top: 50%;
          width: 1rpx;
          height: 24rpx;
          background: #999;
          transform: translateY(-50%);
        }
      }
    }
    .activity-count{
      text-align: right;
      font-weight: 400;
      font-size: 22rpx;
      color: #666666;
      line-height: 36rpx;
      .count-num{
        color: #FF8F1F;
      }
    }
  }
  .footer{
    position: fixed;
    bottom: 120rpx;
    left: 0;
    width: 100vw;
    height: 120rpx;
    background: #FFFFFF;
    display: flex;
    padding: 24rpx 0;
    justify-content: space-between;
    align-items: center;
    .footer-left{
      padding: 0 32rpx;
      display: flex;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      line-height: 36rpx;
      align-items: center;
      gap: 12rpx;
      .checkbox{
        width: 40rpx;
        height: 40rpx;
        background: #EEEEEE;
        border: 2rpx solid #999999;
        margin-right: 12rpx;
      }
    }
    .footer-right{
      display: flex;
      padding-right: 32rpx;
      // flex: 1;
      .footer-total{
        display: flex;
        margin-right: 36rpx;
        align-items: center;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        .price{
          font-weight: 400;
          font-size: 24rpx;
          color: #FA5151;
          line-height: 36rpx;
          .integer-price{
            font-size: 48rpx
          }
          .decimal-price{
            font-size: 32rpx
          }
        }
      }
      .footer-btn{
        width: 180rpx;
        height: 72rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #EE0A24;
        border-radius: 55rpx;
        font-size: 26rpx;
        color: #FFFFFF;
      }
    }
  }
}
</style>
